import React, { useState, useEffect, useContext } from 'react'
import ThemeContext from '../../store/context';

// const mutations = {
//   increment(state, ...params) {
//     return state;
//   },
//   decrement(state, ...params) {
//     return state;
//   },
// }

// function reducer(state, action) {
//   return mutations[action.type](state, action.payload);
// }

const useCounter = () => {
  let timer = null;
  const [counter, setCounter] = useState(1);

  useEffect(() => {
    timer = setTimeout(() => {
      setCounter(counter + 1);
    }, 1000);

    return () => {
      clearTimeout(timer);
      timer = null;
    };
  });

  return counter;
}

// const ChatAPI = {
//   subscribeToFriendStatus(friendID, fn) {
//     io.on('message', (data) => {
//       if (data.friendID === friendID) {
//         fn(data.status);
//       }
//     })
//   }
// }

const Hook = () => {
  const context = useContext(ThemeContext);
  const [message, setMessage] = useState('message');
  const counter = useCounter();

  const clickMessageHandle = () => {
    setMessage('hello world');
  }

  const clickCounterHandle = () => {
    // setCounter(counter + 1);
  }

  useEffect(() => {
    console.log(context);
  }, [context]);

  return (
    <>
      <div>{message}</div>
      <div>{counter}</div>
      <div onClick={clickMessageHandle}>click message</div>
      <div onClick={clickCounterHandle}>click counter</div>
    </>
  )
}

export default Hook;
